<template>
  <div class="device-status">
    <h2 class="page-title">设备状态</h2>

    <div class="status-card">
      <div class="status-header">
        <div class="status-icon" :class="deviceStatus.online ? 'online' : 'offline'">
          <van-icon :name="deviceStatus.online ? 'link-o' : 'warning-o'" size="24" />
        </div>
        <div class="status-info">
          <h2>{{ deviceStatus.name }}</h2>
          <p>{{ deviceStatus.online ? '在线' : '离线' }} | {{ deviceStatus.lastOnline }}</p>
        </div>
      </div>

      <van-divider />

      <div class="status-details">
        <div class="detail-item">
          <span class="label">设备ID:</span>
          <span class="value">{{ deviceStatus.id }}</span>
        </div>
        <div class="detail-item">
          <span class="label">IP地址:</span>
          <span class="value">{{ deviceStatus.ip }}</span>
        </div>
        <div class="detail-item">
          <span class="label">固件版本:</span>
          <span class="value">{{ deviceStatus.version }}</span>
        </div>
        <div class="detail-item">
          <span class="label">运行时间:</span>
          <span class="value">{{ deviceStatus.uptime }}</span>
        </div>
      </div>

      <van-divider />

      <div class="status-controls">
        <van-switch v-model="deviceStatus.power" size="24px" />
        <span class="control-label">设备电源: {{ deviceStatus.power ? '开启' : '关闭' }}</span>
      </div>
    </div>

    <div class="status-card">
      <h3 class="card-title">传感器状态</h3>
      <div class="sensors">
        <div class="sensor" v-for="sensor in sensors" :key="sensor.id">
          <van-icon :name="sensor.icon" size="24" :color="sensor.active ? '#07c160' : '#ee0a24'" />
          <span>{{ sensor.name }}</span>
          <span :class="sensor.active ? 'active' : 'inactive'">
            {{ sensor.active ? '正常' : '异常' }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { Toast } from 'vant'

export default {
  setup() {
    // 设备状态数据
    const deviceStatus = reactive({
      name: '主控设备 #001',
      id: 'DEV-20230918-001',
      online: true,
      lastOnline: '2023-09-18 15:47:36',
      ip: '192.168.1.100',
      version: 'v2.1.5',
      uptime: '12天 5小时 32分钟',
      power: true
    })

    // 传感器数据
    const sensors = ref([
      { id: 1, name: '温度传感器', icon: 'fire-o', active: true },
      { id: 2, name: '湿度传感器', icon: 'water-o', active: true },
      { id: 3, name: '运动传感器', icon: 'cluster-o', active: false },
      { id: 4, name: '光照传感器', icon: 'bulb-o', active: true }
    ])

    return {
      deviceStatus,
      sensors
    }
  }
}
</script>

<style scoped>
.page-title {
  padding: 20px 0 15px;
  font-size: 24px;
  font-weight: 600;
  color: #1989fa;
}

.status-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.status-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.status-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.online .status-icon {
  background: #e8f5e9;
  color: #4caf50;
}

.offline .status-icon {
  background: #ffebee;
  color: #f44336;
}

.status-info h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.status-info p {
  color: #888;
  font-size: 14px;
}

.status-details {
  margin: 15px 0;
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
}

.detail-item .label {
  width: 80px;
  color: #666;
}

.detail-item .value {
  flex: 1;
  font-weight: 500;
}

.status-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.control-label {
  font-size: 16px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.sensors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.sensor {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.sensor span:last-child {
  margin-left: auto;
}

.active {
  color: #07c160;
}

.inactive {
  color: #ee0a24;
}
</style>